{% extends "layouts/base.volt" %}

{% block title %}{{ get_title() }}{% endblock %}

{% block css %}{{ stylesheet_link('css/pages/signin.css') }}{% endblock %}

{% block content %}
{{ partial("layouts/navbar", ['currentPage': 'login']) }}

<div class="account-container">
	
	<div class="content clearfix">
		
		<form action="#" method="post">
		
			<h1>用户登录</h1>		
			
			<div class="login-fields">
				
				<p>请提供你的身份认证</p>
				
				<div class="field">
					<label for="username">用户名：</label>
					<input type="text" id="username" name="username" value="" placeholder="用户名" class="login username-field" />
				</div> <!-- /field -->
				
				<div class="field">
					<label for="password">密码：</label>
					<input type="password" id="password" name="password" value="" placeholder="密码" class="login password-field"/>
				</div> <!-- /password -->
				
			</div> <!-- /login-fields -->
			<div id="alert">
			</div>
			
			<div class="login-actions">
				
				<span class="login-checkbox">
					<input id="Field" name="Field" type="checkbox" class="field login-checkbox" value="First Choice" tabindex="4" />
					<label class="choice" for="Field">一周内保持登陆</label>
				</span>
									
				<input id="login_button" class="button btn btn-success btn-large" type="button" value="登陆">
				
			</div> <!-- .actions -->
			
			
			
		</form>
		
	</div> <!-- /content -->
	
</div> <!-- /account-container -->

</div>

<div class="login-extra">
	<a href="#">重置密码</a>
</div> <!-- /login-extra -->
{% endblock %}

{% block js %}
<script>
$(document).ready(function(){
  $("#login_button").click(function() {
    var username = $("#username").val();
    var password = $("#password").val();

    if(username == "" || password == ""){
    	$("#alert").html("<div class='alert'><button type='button' class='close' data-dismiss='alert'>×</button><strong>警告！</strong> 用户名或密码不能为空。</div>");
    	return;
    }

    $.post("/login/login",
    {
      username:username,
      password:password
    },
    function(data,status){
      if(data != "" && data != "error"){
      	$("#alert").html("<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert'>×</button><strong>恭喜！</strong> 验证成功。</div>");
        top.location = data;
      }else{
      	$("#alert").html("<div class='alert'><button type='button' class='close' data-dismiss='alert'>×</button><strong>警告！</strong> 用户名或密码错误。</div>");
      }
    });
  });
});
</script>
{% endblock %}